<template>
  <div class="about">
    <h1>我是About组件 - {{shoplist.length}}</h1>
    <Child/>
  </div>
</template>


<!-- Vue3 语法糖 -->
<script setup>
  //导入组件,无需注册即可使用.
  import Child from '../components/Child.vue'
  import axios from 'axios'

  import { onMounted,onBeforeMount,onBeforeUpdate,onUpdated,onUnmounted,onBeforeUnmount,reactive,ref } from 'vue'

  var shoplist = ref([])
  
  // Vue3中 组合式api 的组件生命周期钩子函数, 原先的beforeCreate和created 被setup替换了.
  onBeforeMount(()=>{}) //挂载期
  onMounted(()=>{
    console.log('组合式 onMounted');
    //在这里发送ajax请求,创建定时器,设置监听
    axios.get('/api/shop/list').then((res)=>{
      console.log(res.data);
      //shoplist = res.data.list;//这行代码会覆盖原有的响应式数据, 容易失去响应式
      shoplist.value = res.data.list;//这行代码会覆盖原有的响应式数据, 容易失去响应式
    })
  })
  onBeforeUpdate(()=>{}) //更新期
  onUpdated(()=>{}) 
  onBeforeUnmount(()=>{//卸载期的钩子函数
    //在这里取消ajax请求,销毁定时器,取消监听
  }) 
  onUnmounted(()=>{})

</script>
